import React from "react";

import Card from "@material-ui/core/Card";
import Button from "@material-ui/core/Button";

import WalletsBoxItem from "./components/WalletsBoxItem";
import { useTranslation } from "react-i18next";
import { List, Typography } from "@material-ui/core";

const WalletsBox = () => {
  const tetherIcon = require("./../../assets/images/WalletsBox/tether.svg");
  const { t } = useTranslation();

  return (
    <>
      <Card className="wallet-box-container width-102">
        <div className="box-title ">
          <Typography
            variant="h6"
            className=" font-size-xxl mt-4 ml-4"
            color="textPrimary"
          >
            {t("dashboard:my_wallets")}
          </Typography>
          <Button
            variant="text"
            color="primary"
            size="large"
            className="font-size-xl view-all-btn mt-2 mr-2"
          >
            {t("buttons:view_all")}
          </Button>
        </div>
        <div className="divider mt-2" />
        <List className="box-content">
          <WalletsBoxItem walletIcon={tetherIcon} />
          <WalletsBoxItem walletIcon={tetherIcon} />

          <WalletsBoxItem walletIcon={tetherIcon} />
          <Button
            size="large"
            variant="outlined"
            className=" font-weight-bold wallet-btn"
          >
            {t("buttons:add_new_wallet")}
          </Button>
        </List>
      </Card>
    </>
  );
};

export default WalletsBox;
